<template>
    <div>
        <el-breadcrumb separator=">">
            <el-breadcrumb-item v-for="(item,i) in breadcrumb_list" class="cursor-p" :key="i" @click="go(i,item)">{{ item.name }}</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="flex flex-j-s" >
            <!-- <div class="flex flex-align">
                <div class="fontt">文章来源：{{source||'现代企业创新网'}}</div>
                <div class="fontt" style="margin-left: 66px;">{{ time }}</div>
            </div> -->
            <div class="fontt flex flex-align fx">
                <!-- 分享
                <img src="@/assets/img/anim/i1.png" alt="">
                <img src="@/assets/img/anim/i2.png" alt="">
                <img src="@/assets/img/anim/i3.png" alt="">
                <img src="@/assets/img/anim/i4.png" alt=""> -->
            </div>
        </div>
        <div>
            <div class="f-title-26 MarT12" style="text-align: center">
              {{ title }}
            </div>
            <div class="flex flex-j-c flex-align fontt p-t po-re" style="width: 100%;height: 60px;">
                <div style="margin-right: 30px;">{{ time }}</div>
                <div >文章来源：{{source||'现代企业创新网'}}</div>
                <div class="fontt flex flex-align fx cursor-p" style="position:absolute;right:0;top:0;height: 80px;">
                    分享
                    <img @click="shareToWeChat()" src="@/assets/img/anim/i1.png" alt="">
                    <img @click="shareToMicroblog()" src="@/assets/img/anim/i2.png" alt="">
                    <img @click="shareToQQRom()" src="@/assets/img/anim/i3.png" alt="">
                    <!-- <img src="@/assets/img/anim/i4.png" alt=""> -->
                </div>
            </div>
        </div>
        <el-divider />
        <div style="min-height: 400px;">
            <slot name="content">
                
            </slot>
        </div>
        <div class="flex flex-j-c" style="margin-top: 90px;padding-bottom:100px;">
            <div class="btnitem cursor-p" @click="sc(1)">
                <img src="@/assets/img/anim/i5.png" alt="">
                <span>点赞</span>
            </div>
            <div class="btnitem cursor-p" @click="sc(2)" style="margin-left:125px ;">
                <img src="@/assets/img/anim/i6.png" alt="">
                <span>收藏</span>
            </div>
        </div>
    </div>
  </template>
  
  <script setup>
  import listView from '../components/list.vue';
  import { ref,reactive, onMounted,getCurrentInstance } from "vue";
  const { proxy } = getCurrentInstance();
  import CryptoJS from 'crypto-js';
  import { useRoute, useRouter } from "vue-router";
  const Router = useRouter();
      // 面包屑
      // 导航参数
    const query = proxy.$comJs.decrypt(Router.currentRoute.value.query.ob,'query')
    const breadcrumb_list = [{name:query.first_title,path:query.first_path?query.first_path:''},{name:query.title},{name:'正文'}]
    const go=(i,item)=>{
        if(i == 0){
            if(item.path){
                Router.go(item.path)
            }else{
                Router.go(-2)
            }
            
        }
        if(i == 1){
            Router.back()
        }
    }
    const props = defineProps({
        time: {
            type: String,
            default: "",
        },
        source:{
            type: String,
            default: "",
        },
        title:{
            type: String,
            default: "",
        },
    })
    let emit = defineEmits(["titleClick"]);
    const sc=(type)=>{
        if(type == 1){
            emit("Like");
        }
        if(type == 2){
            emit("collect");   
        }
    }
    /**
     * 分享到微博
     */
    const shareToMicroblog=()=> {
      //跳转地址
      window.open(
        "https://service.weibo.com/share/share.php?url=" +
          encodeURIComponent(location.href)
      );
    }
    /**
     * 分享到qq空间
     */
    const shareToQQRom=() =>{
      //跳转地址
      window.open(
        "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" +
          encodeURIComponent(location.href)
      );
    }
    import qrcode from 'qrcode';
    const qrCodeData = ref('')
    /**
     * 分享到微信：需要单独画页面
     */
    // 将Base64字符串转换为Blob对象
    const dataURItoBlob=(dataURI)=> {
        const byteString = atob(dataURI.split(',')[1]);
        const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
        
        const arrayBuffer = new ArrayBuffer(byteString.length);
        const uintArray = new Uint8Array(arrayBuffer);
        
        for (let i = 0; i < byteString.length; i++) {
            uintArray[i] = byteString.charCodeAt(i);
        }
        
        return new Blob([uintArray], { type: mimeString });
    }
 
    // 获取Blob URL
    const getBlobUrl=(blobObject) =>{
        return window.URL.createObjectURL(blobObject);
    }
    const shareToWeChat=()=> {
        const qrCodeData = location.href;
        qrcode.toDataURL(qrCodeData, (err, url) => {
            if (err) {
            } else {
                const blobObj = dataURItoBlob(url);
                const imageUrl = getBlobUrl(blobObj);
                
                window.open(imageUrl);
            }
        });
    }
  </script>
  <style lang='less' scoped>
  .fontt{
    font-size: 16px;
    color:#8d8d8d;
  }
  .fx{
    img{
        margin-left: 12px;
        width:32px ;
        height: 32px;
    }
  }
.btnitem{
    display: flex;
    align-items: center;
    img{
        width: 80px;
        height: 80px;
    }
    span{
        margin-left: 18px;
        font-size: 14px;
    }
    
}
</style>
  

